<template>
	<view class="live-card">
		<image :src="good.img" mode="aspectFill"  class="good"></image>
		<view class="p-l-20 p-b-30">
			<view class="good-title fz24 fw-b mb-14">{{good.title}}</view>
			<view class=" df-ac">
				<image :src="good.avatar" mode="" class="user"></image>
				<view class="">
					<view class="fz24 c-28">{{good.name}}</view>
					<view class="fz18 c-bc">{{good.position}}</view>
				</view>
			</view>
		</view>
		<view class="view df-ac">
			<image src="../static/imgs/view.png" mode="" class="view-icon"></image>
			<view class="text">
				786观看
			</view>
		</view>
		<image src="../static/imgs/lick.png" mode="" class="like"></image>
	</view>
</template>

<script>
	export default {
		props:{
			good:{
				type:Object,
				default:()=>{
					return {}
				}
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
.live-card {
	position: relative;
	margin-right: 30rpx;
	box-shadow: 0px 4rpx 18rpx 0px rgba(0,0,0,0.08);
	border-radius: 20rpx;
	.good{
			width: 300rpx;
			height: 300rpx;
			border-radius: 20rpx 20rpx 0 0;
			margin-bottom: 25rpx;
			background-size: cover;
			img {
				background-size:cover ;
			}
	}
	.user {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	.view {
		border-radius: 20rpx;
		background-color: rgba(0,0,0,.3);
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		font-size: 22rpx;
		color: #fff;
		padding-right: 20rpx;
		.view-icon {
			width: 36rpx;
			height: 36rpx;
			margin-right: 10rpx;
		}
	}
	.like {
		position: absolute;
		width: 46rpx;
		height: 46rpx;
		right: 20rpx;
		top: 277rpx;
	}
}
</style>
